<ng-container *appObserve="complianceData$ as complianceData; error:errorTemplate loading:loadingTemplate">
  <app-risks-view-report
    #complianceViewReport
    *ngIf="complianceList && isPrinting"
    class="printable-area"
    [reportPage]="'compliance'"
    [data]="complianceList"
    [charts]="statisticCharts"
  >
  </app-risks-view-report>
  <app-assets-view-report
    #assetsViewReport
    *ngIf="complianceList && isPrintingAssets"
    class="printable-area"
    [reportPage]="'compliance'"
    [masterGrids]="masterGrids"
    [dictionaryData]="complianceList"
  >
  </app-assets-view-report>
  <div class="screen-area" style="height: calc(100vh - 180px)">
    <div class="d-flex justify-content-end align-items-center">
      <!-- <app-loading-button
        (btnClick)="downloadAssetsPDF()"
        [disabled]="(assetViewPdfProgress$ | async) !== 100"
        [loading]="(assetViewPdfProgress$ | async) !== 100"
        appearance="mat-button"
        buttonClasses="mr-1 d-flex justify-content-center align-items-center"
        iconClasses="eos-icons"
        iconName="picture_as_pdf"
        text="PDF(Assets View)"
      >
      </app-loading-button>
      <app-loading-button
        (btnClick)="downloadCompliancePDF()"
        [disabled]="(complianceViewPdfProgress$ | async) !== 100"
        [loading]="(complianceViewPdfProgress$ | async) !== 100"
        appearance="mat-button"
        buttonClasses="mr-1 d-flex justify-content-center align-items-center"
        iconClasses="eos-icons"
        iconName="picture_as_pdf"
        text="PDF(Compliance View)">
      </app-loading-button> -->
      <app-loading-button
        (btnClick)="printAssetsPDF()"
        [text]="'cis.report.PDF_LINK2' | translate"
        appearance="mat-button"
        buttonClasses="mr-1 d-flex justify-content-center align-items-center"
        iconClasses="eos-icons"
        iconName="print">
        >
      </app-loading-button>
      <app-loading-button
        (btnClick)="printCompliancePDF()"
        [text]="'cis.report.PDF_LINK' | translate"
        appearance="mat-button"
        buttonClasses="mr-1 d-flex justify-content-center align-items-center"
        iconClasses="eos-icons"
        iconName="print">
      </app-loading-button>
      <button
        (click)="downloadCsv()"
        class="mr-1 d-flex justify-content-center align-items-center"
        mat-button>
        <i
          class="eos-icons">csv_file</i>
      </button>
      <app-loading-button
        (btnClick)="refresh()"
        [appearance]="'mat-button'"
        [buttonClasses]="'d-flex justify-content-center align-items-center'"
        [disabled]="false"
        [iconClasses]="'eos-icons icon-18'"
        [iconName]="'refresh'"
        [id]="'registries-refresh-button'"
        [loading]="false"
        [text]="'network.REFRESH' | translate"
        [type]="'button'">
      </app-loading-button>
    </div>
    <div style="height: 200px">
      <app-compliance-charts [compliances]="complianceData.compliance.compliances"></app-compliance-charts>
    </div>
    <div style="height: calc(100% - 160px)">
      <app-compliance-items
        [complianceDist]="complianceData.complianceDist"
        [compliances]="complianceData.compliance.compliances"
        [domains]="complianceData.domain"></app-compliance-items>
    </div>
  </div>
</ng-container>
<ng-template #errorTemplate let-error>
  {{ error | json }}
</ng-template>
<ng-template #loadingTemplate>
  <app-loading-template></app-loading-template>
</ng-template>
